<template>
<div class="image-show">
  <el-image
      fit="contain"
      :src="url"
      class="image"
      :preview-src-list="srcList"
  />
  <div class="title">{{title}}</div>
</div>
</template>

<style scoped>
.image {
  width: 100%;
  height: 80%;
  border-radius: 15px;
}
.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
}

.image-show {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

</style>

<script setup>

import {ref,watch} from "vue";

let props = defineProps({
  url:{
    type:String,
    required:true
  },
  title:{
    type:String,
    required:true
  }
})

let srcList = ref([])

watch(() => props.url, (newValue) => {
  srcList.value = [newValue]
})


</script>